<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>读者信息</title>
    <script src="tools/layui-v2.5.5/layui/layui.js" type="text/javascript"></script>
    <script src="js/jquery-3.2.1.js" type="text/javascript"></script>
    <script src="js/vue-2.4.0.js" type="text/javascript"></script>
    <script src="tools/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript"></script>
    <link href="tools/bootstrap-3.3.7-dist/css/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="tools/layui-v2.5.5/layui/css/layui.css" type="text/css" rel="stylesheet">
</head>
<body>

<div id="app">

    <%--    <div class="div01">--%>
    <%--        <form class="form-inline">--%>
    <%--            <div class="form-group">--%>
    <%--                <label for="exampleInputName2">请输入书名</label>--%>
    <%--                <input type="text" class="form-control" v-model="bookName" id="exampleInputName2" placeholder="请输入图书名">--%>
    <%--            </div>--%>
    <%--            <div class="form-group">--%>
    <%--                <label for="exampleInputEmail2">请输入借阅者</label>--%>
    <%--                <input type="text" class="form-control" v-model="name" id="exampleInputEmail2" placeholder="请输入借阅者">--%>
    <%--            </div>--%>
    <%--            <button type="button" @click="submit" class="btn btn-default">查询</button>--%>
    <%--        </form>--%>
    <%--    </div>--%>

    <div>
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>读者编号</th>
                <th>读者名称</th>
                <th>性别</th>
                <th>身份</th>
                <th>电子邮箱</th>
                <th>电话号码</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${allReaders.list}" var="reader">
                <tr>
                    <td>${reader.reader_id}</td>
                    <td>${reader.name}</td>
                    <td>${reader.sex}</td>
                    <td>${reader.profession}</td>
                    <td>${reader.email}</td>
                    <td>${reader.phone}</td>
                </tr>
            </c:forEach>

            </tbody>
        </table>
    </div>
    <div>
        <nav aria-label="Page navigation">
            <ul class="pagination">

                <li><a href="getReaderInfo?curr=1">首页</a></li>

                <!--上一页-->
                <li>
                    <%--hasPreviousPage 如果有上一页--%>
                    <c:if test="${allReaders.hasPreviousPage}">
                        <a href="getReaderInfo?curr=${allReaders.pageNum-1}"
                           aria-label="Previous">
                            <span aria-hidden="true">«</span>
                        </a>
                    </c:if>
                </li>

                <!--循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接-->
                <%--navigatepageNums  导航页码数 --%>
                <c:forEach items="${allReaders.navigatepageNums}" var="page_num">
                    <c:if test="${page_num == allReaders.pageNum}">
                        <li class="active"><a href="#">${page_num}</a></li>
                    </c:if>
                    <c:if test="${page_num != allReaders.pageNum}">
                        <li>
                            <a href="getReaderInfo?curr=${page_num}">${page_num}</a>
                        </li>
                    </c:if>
                </c:forEach>

                <!--下一页-->
                <li>
                    <c:if test="${allReaders.hasNextPage}">
                        <a href="getReaderInfo?curr=${allReaders.pageNum+1}"
                           aria-label="Next">
                            <span aria-hidden="true">»</span>
                        </a>
                    </c:if>
                </li>

                <li><a href="getReaderInfo?curr=${allReaders.pages}">尾页</a></li>
            </ul>
        </nav>
    </div>
</div>

</body>
<script>
    var layer;
    var app;
    layui.use(['layer'], function(){
        layer = layui.layer;
    });
    app=new Vue({
        el:"#app",
        data:{
            bookName:"",
            name:""

        },
        methods:{
            submit:function () {
                if (this.bookName==""&&this.name==""){
                    layer.msg("请输入查询信息")
                }else {
                    //弹出层
                    layer.open({
                        type: 2,
                        area: ['900px', '300px'],
                        content: ['querybook?bookName='+this.bookName+"&author="+this.name,'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                    this.bookName="";
                    this.name="";
                }
            }

        }
    })
</script>
</html>
